{% extends "base.html" %}

{% block content %}
<div class="row">
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-number">{{ stats.total_runners }}</div>
            <div class="stat-label">总参赛人数</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-number">{{ stats.total_countries }}</div>
            <div class="stat-label">参赛国家数</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-number">{{ stats.total_categories }}</div>
            <div class="stat-label">参赛组别数</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-number">{{ stats.fastest_time }}</div>
            <div class="stat-label">最快完赛时间</div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-12">
        <div class="chart-container">
            <div id="countryChart"></div>
        </div>
    </div>
</div>

<script>
    var graphs = {{ country_chart | safe }};
    Plotly.newPlot('countryChart', graphs.data, graphs.layout);
</script>
{% endblock %}